<template>
  <div id="UserInfo" class="center">
    <div class="header space-around">
      <div class="header-sign">
        <img src="../assets/sign1.png" alt="" width="30px">
        <p>签到</p>
      </div>
      <div class="header-portrait">
        <div class="portrait">
          <img src="../assets/header-portrait.png" alt="">
        </div>
        <p v-if="isLogin">{{username}}</p>
        <p v-if="!isLogin">未登录</p>
      </div>
      <div class="header-duration">
        <span class="duration">{{isLogin?duration:0}}</span><span>分钟</span>
        <p>累积</p>
      </div>
    </div>
    <div class="content-remind" v-if="isLogin">
      <div class="line-left">
        <img src="../assets/line.png" alt="" width="15px">
      </div>
      <div class="line-right">
        <img src="../assets/line.png" alt="" width="15px">
      </div>
      <div class="remind-img" >
        <img src="../assets/star.png" alt="" height="40px">
      </div>
      <div class="remind-text" >
        <p>Learning reminder</p>
        <p>学习提醒</p>
      </div>
      <div class="remind-right">
        <i class="ion-ios-arrow-forward" style="margin: 10px 5%"></i>
      </div>
    </div>
    <div class="user" v-if="isLogin">
      <div  v-for="v in personal">
        <router-link tag="div" :to="{path:'/common/'+v.routerPath,query:{title:v.chName}}" class="personal">
          <div class="remind-img">
            <img :src="v.img" alt="" height="30px">
          </div>
          <div class="remind-text">
            <p>{{v.PersonalData}}</p>
            <p>{{v.chName}}</p>
          </div>
          <div class="remind-right">
            <i class="ion-ios-arrow-forward"></i>
          </div>
        </router-link>
      </div>
    </div>
    <div class="foot">
      <router-link to="/common/feedback?title=反馈" tag="div">
        <div>
          <div class="foot-left">
            <div class="foot-left-img">
              <img src="../assets/feedback.png" alt="" height="30px">
            </div>
            <div class="foot-left-text">
              <p>Feedback</p>
              <p>反 馈</p>
            </div>
         </div>
        </div>
      </router-link>
      <router-link to="/loginAndReg" tag="div" v-if="!isLogin">
        <div class="foot-right">
          <div class="foot-left-img">
            <img src="../assets/signout.png" alt="" height="30px">
          </div>

          <div class="foot-left-text">
              <p>Log in</p>
              <p>登 录</p>
            </div>
        </div>
      </router-link>
      <div v-if="isLogin" @click="logout">
        <div class="foot-right">
          <div class="foot-left-img">
            <img src="../assets/signout.png" alt="" height="30px">
          </div>

          <div class="foot-left-text">
            <p>Sign out</p>
            <p>退 出</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    name: 'userInfo',
    data:function(){
      return {
        duration: 1523,
        personal: [
          {routerPath: 'identity', img: 'static/images/personal-img/personal-data.png', 'PersonalData': 'Personal Data', 'chName': '个人资料'},
          {routerPath: 'setup', img: 'static/images/personal-img/setup.png', 'PersonalData': 'PersonalSettings', 'chName': '个人设置'},
          {routerPath: 'collection', img: 'static/images/personal-img/collection.png', 'PersonalData': 'PersonalCollection', 'chName': '个人收藏'}
        ]
      }
    },
    props:['isLogin','username'],
    methods:{
      logout:function(){
        this.$router.push({path:'/common'});
        this.$emit("tocommon");
      }
    }
  }
</script>
<style>
  .header {
    width: 100%;
    height: 180px;
    background: #f47c4a;
    color: #fff;
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding-top: 30px;
  }
  .header-sign {
    margin: 0 0 0 10px;
  }
  .header-sign img{
    width: 30px;
  }

  .header-sign p {
    font-size: 16px;
  }

  .portrait {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid #fff;
    text-align: center;
    position: relative;
  }

  .portrait img {
    width: 80px;
    vertical-align: middle;
    margin: auto;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
  }
  .header-portrait p {
    font-size: 18px;
  }

  .header-duration span, .header-duration p {
    font-size: 16px;
  }

  .duration {
    font-size: 24px !important;
  }
  /* 中间部分*/
  .content-remind {
    width: 95%;
    height: 50px;
    background: url("../assets/grenn-bg.png") repeat-x;
    background-size:10% 50px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    position: relative;
    font-size: 14px;
  }

  .line-left {
    position: absolute;
    top: -8px;
    left: 3%;
  }

  .line-right {
    position: absolute;
    top: -8px;
    right: 3%;
  }
  .remind-text {
    width: 461px;
    color: #fff;
    text-align: left;
  }
  .remind-text p {
    margin: 5px;
  }
  .remind-right {
    margin: 15px 5% 0 0;
  }
  .remind-right i {
    color: #fff;
    font-size: 18px;
  }
  .user {
    width: 95%;
    height: 165px;
    margin: 20px 0;
    -webkit-box-shadow: 0 -10px 24px #e9e5e6,
    -10px 0 24px #e9e5e6,
    10px 0 24px #e9e5e6;
  }

  .personal, .foot-left, .foot-right {
    width: 100%;
    height: 53px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
    font-size: 14px;
  }
  .personal {
    border: 1px solid #edeaeb;
  }

  .personal p {
    color: #000;
  }

  .personal i {
    color: #919191;
  }

  .foot {
    width: 95%;
    height: 45px;
    display: flex;
    flex-flow: row nowrap;
    color: #fff;
    margin: 10px 0;
  }
  .foot>div{
    width: 50%;
  }
  .foot-left, .foot-right {
    width: 90%;
    height: 45px;
    background: #f6b563;
    padding-left: 10%;

  }

  .foot-right {
    background: #ff8967;
  }


  .foot-left-text {
    text-align: left;
    line-height: 5px;
  }
</style>
